<template>
    <div class="waybillDetailwrap">
        <!-- <div class="titAddress">
            <p>起点: <span>上海市 浦东新区</span></p>
            <p>终点: <span>乌鲁木齐市 昌吉回族自治区</span></p>
        </div> -->
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>运单信息</h3>
            </div>
            <ul>
                <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
                <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
                <li><b>运单状态</b>：<span>{{waybillInfo.transBillStatusName}}</span></li>
                <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
                <li><b>报价方式</b>：<span>{{waybillInfo.quoteType | quoteTypeName}}</span></li>
                <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>期望价格</b>：<i>{{((waybillInfo.transPrice || 0)*1).toFixed(2)}}</i><span>元/吨（含税）</span></li>
                <li><b>运费包含</b>：<span>{{waybillInfo.feeName}}</span></li>
                <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
                <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
            </ul>
        </div>
        <div class="lineInfo">
            <div class="lineSing" v-for='(item,index) in transportD'>
                <div class="titleH3">
                    <i></i>
                    <h3>线路{{index+1}}</h3>
                </div>
                <ul>
                    <li><i>起点</i>：<span>{{item.beginSiteProvince}}</span></li>
                    <li><i>终点</i>：<span>{{item.endSiteProvince}}</span></li>
                    <li><i>提货点</i>：<span style="line-height:24px;">{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
                    <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
                    <li><i>卸货点</i>：<span style="line-height:24px;">{{item.endSiteStorage}}（{{item.endSiteAddr}}）</span></li>
                    <li><i>卸货时间</i>：<span>{{item.deliveryTime}}</span></li>
                    <li><i>货物信息</i>：<span class="goodsSpan">{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.transportGoodsVo)'>查看详情</a></li>
                </ul>
            </div>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade">
            <mt-PopupTable :transportGoodsVo="transportGoodsVo"></mt-PopupTable>
        </mt-popup>
        <!-- 底部报价 -->
        <mt-popup v-model="popupVisible2" position="bottom">
            <div class="quote">
                <div class="row">
                    <input type="text" class="priceIpt" v-model="offerForm.quotationPrice" placeholder="请输入您的报价">
                    <span class="priceText">(元/吨)</span><span v-show="waybillInfo.quoteType == 10">(一口价)</span>
                </div>
                <div class="row price">
                    <div class="">
                        我的报价:<i>{{((quotationPrice || 0)*1).toFixed(2)}}元</i>
                    </div>
                    <div class="allPrice">
                        运费总额:<i>{{((qtransAmount || 0)*1).toFixed(2)}}元</i>
                    </div>
                </div>
                <div class="row">
                    <input type="text" :value="offerForm.pickupTime"  readonly="readonly" placeholder="请选择预计派船/车时间" @click="openStartPicker">
                </div>
                <div class="row">
                    <input type="text" :value="offerForm.deliveryTime"  readonly="readonly" placeholder="请选择预计到达时间" @click="openEndPicker">
                </div>
                <div class="needsclickWrap">
                    <mt-button class='btn sure' type="primary" size="large" @click.native='submitOffer'>确认报价</mt-button>
                </div>
            </div>
        </mt-popup>
        <div class="needsclickWrap">
            <mt-button :disabled="disabled" class='btn needsclick' type="primary" size="large" @click.native='toOffer'>我要报价</mt-button>
        </div>
        <!-- 底部打开日期 -->
        <mt-datetime-picker
        ref="startPicker"
        type="datetime"
        year-format="{value}"
        month-format="{value} 月"
        date-format="{value} 日"
        hour-format="{value} 时"
        minute-format="{value} 分"
        v-model="startPickerValue"
        @confirm="start">
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="datetime"
        year-format="{value}"
        month-format="{value} 月"
        date-format="{value} 日"
        hour-format="{value} 时"
        minute-format="{value} 分"
        v-model="endPickerValue"
        @confirm="end">
      </mt-datetime-picker>
    </div>
</template>
<script type="text/ecmascript-6">
import ApiService from '@/services/API-servies'
import { Tabbar, TabItem ,Cell,TabContainer,TabContainerItem,Button,Popup,DatetimePicker,MessageBox} from 'mint-ui';
import MTabbar from '../foot/Tabbarfoot'
import PopupTable from '../public/popupTable'
  export default {
    created() {
        this.getDetail();
    },
    data() {
      return {
        waybillInfo : {
            transBillId:'',
            transBillDate:'',
            transBillStatusName:'',
            transTypeName:'',
            transWeight:'',
            otherAmount:'',
            transRequest:'',
            feeName:'',
            transAmount:'',
            transPrice:'',
            quoteType:'',
            feeTaxRate:0.11
        },
        offerForm: {
            transBillId:'',
            quotationPrice:'',
            pickupTime:'',
            deliveryTime:'',
            quoteType:'20',
            transWeight:'',
            otherAmount:''
        },
        transportD:[],
        transportGoodsVo:[],
        popupVisible:false,
        popupVisible2:false,
        startPickerValue:new Date(),
        endPickerValue:new Date(),
        transBillStatus:'',
        disabled:true,
        selected: 'a',
        quotationPrice:'',
        qtransAmount:''
      }
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0);
    },
    methods: {
        toOffer(){
             ApiService.quotation.getQuotationInfo({
                transBillId:this.offerForm.transBillId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    //this.assign(res.data);
                    this.quotationPrice = res.data.quotationPrice;
                    this.qtransAmount = res.data.quotationTotalAmount;
                }
            });
            this.offerForm.pickupTime = this.transportD[0].pickupTime;
            this.offerForm.deliveryTime = this.transportD[0].deliveryTime;
            this.offerForm.quotationPrice = (this.waybillInfo.transPrice*1).toFixed(2);
            this.popupVisible2 = true
        },
        getDetail(){
            let transBillId = this.$route.query.transBillId;
            this.offerForm.transBillId = transBillId;
            ApiService.transport.detail({
                transBillId:transBillId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.assign(res.data);
                }
            });
        },
        assign(data){
            for(let item in this.waybillInfo){
                this.waybillInfo[item] = data[item];
            };
            this.transportD = data.transportD;
            this.transBillStatus = data.transBillStatus;
            if(data.transBillStatus == 40){
                this.disabled = false;
            }
        },
        showGoods(transportGoodsVo){
            this.popupVisible=true;
            this.transportGoodsVo=transportGoodsVo
        },
        openStartPicker() {
            this.$refs.startPicker.open()
        },
        openEndPicker() {
            this.$refs.endPicker.open();
        },
        start(value){
            let start = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.pickupTime = start;
        },
        end(value){
            let end = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.deliveryTime = end;
        },
        submitOffer(){
            this.offerForm.transWeight = this.waybillInfo.transWeight;
            this.offerForm.otherAmount = this.waybillInfo.otherAmount;
            this.offerForm.quoteType = this.waybillInfo.quoteType;
            this.offerForm.pickupTime = this.offerForm.pickupTime + ":00";
            this.offerForm.deliveryTime = this.offerForm.deliveryTime + ":00"
            let offerForm =  JSON.stringify(this.offerForm);
            ApiService.quotation.offer(this.offerForm).then((res) =>{
                MessageBox('提示', '操作成功').then(action => {
                      if (action == 'confirm') {
                        this.$router.push({path: 'bidding'})
                      }
                });
                this.popupVisible2 = false;
            });
        },
        //ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          },
    }
    ,
    filters: {
      quoteTypeName(val) {
        if (val == 10) {
          return '总价'
        } else if (val == 20) {
          return '单价'
        }
      },
   
    },
    watch: {
        /*transBillStatus:function(val, oldVal){
            if(val == 40){
                this.disabled = false;
            }
        },*/
    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer : TabContainer,
      MtTabContainerItem : TabContainerItem,
      MTabbar,
      MtButton:Button,
      MtPopup:Popup,
      MtPopupTable:PopupTable,
      MtDatetimePicker:DatetimePicker
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/public.less";
  .waybillDetailwrap{
     
        i, b{
          text-align: justify;
          text-align-last: justify;
          line-height: 0;
        }
    }
  .quote{
    width: 756px;
    padding: 30px;
    .row{
        padding:10px 30px;
        input{
            padding: 10px;
            width: 680px;
            height: 47px;
            border: 2px solid #ccc;
            border-radius: 6px;
            font-size: 28px;
            &.priceIpt{
                width: 500px
            }
            &::-webkit-input-placeholder{color:#BBB;}
        }
        .priceText{
            font-size: 32px;
            color: #3180FF
        }
    }
    .price{
        font-size: 28px;
        i{
            color: #FB0015
        }
        .allPrice{
            margin-left: 60px
        }
    }
  }
</style>















